<template>
    <div>
        <h3>增加用户</h3>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td align="right">用户名</td>
                    <td><input type="text" v-model="info.UserName"></td>
                </tr>
                <tr>
                    <td align="right">密码</td>
                    <td><input type="password" v-model="info.UserPwd"></td>
                </tr>
                <tr>
                    <td align="right">确认密码</td>
                    <td><input type="password" v-model="pawd1"></td>
                </tr>
                <tr>
                    <td align="right">昵称</td>
                    <td><input type="text" v-model="info.NickName"></td>
                </tr>
               
                <tr>
                    <td align="right">性别</td>
                    <td>
                        <input type="radio" v-model="info.Gender" name="gander" :value="1">男
                        <input type="radio" v-model="info.Gender" name="gander" :value="0">女
                    </td>
                </tr>
                <tr>
                    <td align="right">状态</td>
                    <td>
                        <input type="radio" v-model="info.State" name="State" :value="1">冻结
                        <input type="radio" v-model="info.State" name="State" :value="0">解冻
                    </td>
                </tr>
                <tr>
                    <td align="right">身份证照片</td>
                    <td><input type="file" @change="imgs">
                    <img :src="info.CardPhoto" width="60" height="60" v-if="info.CardPhoto!=''"></td>
                </tr>
                <tr>
                    <td align="right">照片</td>
                    <td><input type="file" @change="img">
                    <img :src="info.Photo" width="60" height="60" v-if="info.Photo!=''"></td>
                </tr>
                <tr>
                    <td align="right">手机号</td>
                    <td><input type="text" v-model="info.Tel"></td>
                </tr>
                <tr>
                    <td align="right">生日</td>
                    <td><input type="date" v-model="info.BirthDay"></td>
                </tr>
                <tr>
                    <td align="right">简介</td>
                    <td>
                        <textarea rows="5" cols="50" v-model="info.Desc"></textarea>
                    </td>
                </tr>
                <tr>
                    <td align="right">角色</td>
                    <td>
                    <select v-model="info.RoleId">
                        <option value="">请选择</option>
                        <option :value="item.Id" v-for="item in err">{{ item.RoleName }}</option>
                    </select></td>
                </tr>
                 <tr>
                    <td align="right"></td>
                    <td><input type="button" value="添加" @click="add"></td>
                </tr>
            </tbody>
        </table>
         {{ info }}
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue'
import axios from 'axios'; 
import moment from 'moment';
import{useRoute,useRouter}from 'vue-router'
import{useStore}from '@/stores/user'
const route=useRoute();
const router=useRouter();
const uStore=useStore();

let info:any=reactive({
  "UserName": "",
  "UserPwd": "",
  "NickName": "",
  "Gender": 1,
  "State": 1,
  "CardPhoto": "",
  "Photo": "",
  "Tel": "",
  "BirthDay": "",
  "Desc": "",
  "RoleId": "",
})
let pawd1=ref("");
//角色下拉列表
let err:any=ref([])
onMounted(()=>{
    if(uStore.userInfo.id==""){
        
    }
    bingjs();
})
const bingjs=()=>{
    axios({
        url:'/api/Admin/BindRole',
        method:'get',
        
    })
    .then((res)=>{
        err.value=res.data
    })
}
//添加
const add=()=>{
    if(info.UserPwd!=pawd1.value){
        alert("密码不一至")
        return;
    }
    let reg=/^1[3-9]d{9}$/;
    if(reg.test(info.Tel)==false){
        alert("手机号不符合要求");
        return;
    }
    if(isNaN(info.Desc)==true){
        alert("不是数字");
        return;
    }
    if(info.Desc<1||info.Desc>100){
        alert("只能是1-100之间的数字");
        return;
    }
    // if(info.Desc.length>50){
    //     alert("简介只能是50之内的字")
    //     return;
    // }
    axios({
        url:'/api/Admin/AddAdmin',
        method:'post',
        data:info
    })
    .then((res)=>{
        if(res.data==-1){
            alert("电话重复")
            return;
        }
        if(res.data!=0){
            alert("添加成功");
            router.push("/adminList");
            return;
        }
        else
        {
            alert("添加失败");
            return;
        }
    })
}
//图片上传
const img=(e:any)=>{
    var obj=e.target.files[0]
    var f=new FormData()
    f.append("file",obj)
    axios({
        url:'/api/File/Img',
        method:'post',
        data:f
    })
    .then((res)=>{
        if(res.data=="不是图片"){
            alert("不是图片")
            return;
        }
        if(res.data=="大于2M"){
            alert("大于2M")
            return;
        }
        info.Photo=res.data

    })

}
//图片上传
const imgs=(e:any)=>{
    var obj=e.target.files[0]
    var f=new FormData()
    f.append("file",obj)
    axios({
        url:'/api/File/Img',
        method:'post',
        data:f
    })
    .then((res)=>{
        if(res.data=="不是图片"){
            alert("不是图片")
            return;
        }
        if(res.data=="大于2M"){
            alert("大于2M")
            return;
        }
        info.CardPhoto=res.data

    })

}
</script>

<style scoped>

</style>